import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import DrillScope from './DrillScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import Tab from 'lib/components/tab.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'

import Resizable from 'lib/components/Resizable.jsx';
import AutoSizeLink from './AutoSizeLink.jsx';

var traceCols = [{
  title:'请求名称',
  key:'url',
  render:function(fmtVal,rowData){
    return (
      <AutoSizeLink fmtVal={ fmtVal } rowData={ rowData } />
    )
  }
},{
  title:'响应时间',
  key:'totalTime',
  sortable:true,
  containerStyle: {
    whiteSpace: 'nowrap'
  },
  formatter:format.numSecond
},{
  title:'请求时间',
  key:'timestamp',
  sortable:true,
  containerStyle: {
    whiteSpace: 'nowrap'
  },
  formatter:format.stampToTime
}]
export default class RootView extends View {
  constructor(props){
    super(props);
  }

  resizeHandler(current) {
    if (this.__width !== current.width) {
      this.__width = current.width;
      if (this.__timer) {
        clearTimeout(this.__timer);
      }
      this.__timer = setTimeout(() => {
        this.__timer = null;
        this.forceUpdate();
      }, 30);
    }
  } // resizeHandler

  render(){
    return (
      <div className="box">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            <h4>{this.state.title}</h4>
          </div>
          <div className="widget-content">
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card>
                    <Tab>
                      {
                        // <Tab.Panel title="响应时间分析" key="c0">
                        //   <ChartWidget store={this.state.chart_percentile} key="percent"/>
                        // </Tab.Panel>
                      }
                      <Tab.Panel title="响应时间 Top 5" key="c0">
                        <ChartWidget store={this.state.chart0} key="res"/>
                      </Tab.Panel>
                      <Tab.Panel title="吞吐量" key="c1">
                        <ChartWidget store={this.state.chart1} key="thp" chartType="area"/>
                      </Tab.Panel>
                      <Tab.Panel title="网络故障率" key="c2">
                        <ChartWidget store={this.state.chart2} key="neterr"/>
                      </Tab.Panel>
                      <Tab.Panel title="HTTP 错误率" key="c3">
                        <ChartWidget store={this.state.chart3} key="err"/>
                      </Tab.Panel>
                    </Tab>
                  </Card>
                </div>
              </div>
            </div>
            {
              <div className="pure-g">
                <div className="pure-u-1">
                  <Resizable className="box" useLoadFire={ false } onResize={ this.resizeHandler.bind(this) }>
                    <Card title="慢请求Trace">
                      <GridWidget store={this.state.grid} cols={traceCols}/>
                    </Card>
                  </Resizable>
                </div>
              </div>
            }

          </div>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:DrillScope
}
